<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>		
        <script type="text/javascript" src="../../js/ctp/public/jquery.ctp.jslog.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/checkboxgroup/ctp.ui.checkboxgroup.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/checkbox/ctp.ui.checkbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>	
		
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>		
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/checkboxgroup.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/checkbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
		
        <script>
           // var CTP_DEBUG = true;
			//ctp.core.log.lvl=ctp.core.loglvl.obj;
            var checkboxGroup1;
			$(document).ready(
				function(){
				 checkboxGroup1=new ctp.ui.checkboxgroup({
			  	    id: 'checkboxDiv',	
					validate: 'rules[required]',	
					width:'100%',			
			  	    items:[{id:'checkbox1',label:'checkbox1过长测试过长测试',value:'111',checked:true},{id:'checkbox2',label:'checkbox2',value:'222'},{id:'checkbox3',label:'checkbox3',value:'333'}]			   
			     });
				var button1= new ctp.ui.button({
			  	      id: 'button1',	
					  text:'全选',
					  width:180,					 
					  onClick: function (){
				                     checkboxGroup1.setGroupChecked(true);  
			                      }		   
			     });
				var button2= new ctp.ui.button({
			  	      id: 'button2',	
					  text:'全不选',		
					  width:180,			 
					  onClick:function (){
				                     checkboxGroup1.setGroupChecked(false);  
			                      }			   
			     });
				var button3= new ctp.ui.button({
			  	      id: 'button3',
					  width:180,
					  text:'禁止所有按钮',					 
					  onClick:function (){
				                     checkboxGroup1.setDisable(true);  
			                      }			   
			     });
				 var button4=new ctp.ui.button({
			  	      id: 'button4',	
					  width:180,
					  text:'启用所有按钮',					 
					  onClick:function (){
				                     checkboxGroup1.setDisable(false);  
			                      }			   
			     });
				var button5= new ctp.ui.button({
			  	      id: 'button5',	
					  width:180,
					  text:'是否所有按钮禁用',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: checkboxGroup1.isDisable()
									 });  
			                      }		   
			     });
				var button6= new ctp.ui.button({
			  	      id: 'button6',
					  width:180,
					  text:'是否所有按钮被选择',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: checkboxGroup1.isGroupChecked()
									 });  
			                      }		   
			     });
				var button7= new ctp.ui.button({
			  	      id: 'button7',
					  width:180,
					  text:'是否所有按钮未被选择',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: checkboxGroup1.isGroupUnchecked()
									 });  
			                      }		   
			     });
				var button8= new ctp.ui.button({
			  	      id: 'button8',
					  width:180,
					  text:'设置checkbox2的值',					 
					  onClick:function (){
				                     checkboxGroup1.setItemValue("checkbox2","checkbox2重设");  
			                      }
			    	 		   
			     });
				var button9= new ctp.ui.button({
			  	      id: 'button9',
					  width:180,
					  text:'取得checkbox2的值',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: checkboxGroup1.getItemValue("checkbox2")
									 });  
			                      }
			    	 		   
			     });
				var button10= new ctp.ui.button({
			  	      id: 'button10',
					  width:180,
					  text:'设置checkbox2的文本',					 
					  onClick:function (){
				                     checkboxGroup1.setItemLabel("checkbox2","checkbox2重设文本");  
			                      }
			    	 		   
			     });
				var button11= new ctp.ui.button({
			  	      id: 'button11',
					  width:180,
					  text:'取得checkbox2的文本',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: checkboxGroup1.getItemLabel("checkbox2")
									 });  
			                      }
			    	 		   
			     });
				 
				var button12= new ctp.ui.button({
			  	      id: 'button12',
					  width:180,
					  text:'删除所有成员',					 
					  onClick:function (){
				                     checkboxGroup1.delAllItems();  
			                      }
			    	 		   
			     });
				var button13= new ctp.ui.button({
			  	      id: 'button13',	
					  width:180,
					  text:'删除checkbox3成员',					 
					  onClick:function (){
				                     checkboxGroup1.delGroupItemByIds("checkbox3");  
			                      }
			    	 		   
			     });
				var button14= new ctp.ui.button({
			  	      id: 'button14',
					  width:180,
					  text:'增加新成员',					 
					  onClick:function (){
				                     checkboxGroup1.addGroupItem([{id:'checkbox4',label:'新成员',value:'新成员1'},{id:'checkbox5',label:'西瓜好',value:'新成员2'}]);  
			                      }
			    	 		   
			     });
				var button15= new ctp.ui.button({
			  	      id: 'button15',
					  width:180,
					  text:'成员数',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: checkboxGroup1.getItemCount()
									 });  
			                      }
			    	 		   
			     });
				var button16=  new ctp.ui.button({
			  	      id: 'button16',
					  width:180,
					  text:'采用行式布局',					 
					  onClick:function (){
				                    checkboxGroup1.setDisplay("rows");  
			                      }
			    	 		   
			     });
				var button17= new ctp.ui.button({
			  	      id: 'button17',
					  width:180,
					  text:'采用列式布局',					 
					  onClick:function (){
				                    checkboxGroup1.setDisplay("cols");  
			                      }
			    	 		   
			     });
				var button18= new ctp.ui.button({
			  	      id: 'button18',
					  width:180,
					  text:'取值',					 
					  onClick:function (){
				                    ctpMSB.alert({
										title: '信息提示',
										message: checkboxGroup1.getValue()
									});  
			                      }
			    	 		   
			     });
				var button19= new ctp.ui.button({
			  	      id: 'button119',
					  width:180,
					  text:'禁用checkbox2',					 
					  onClick:function (){
				                     checkboxGroup1.setItemDisable("checkbox2",true);  
			                      }
			    	 		   
			     });
				var button20= new ctp.ui.button({
			  	      id: 'button20',
					  width:180,
					  text:'启用checkbox2',					 
					  onClick:function (){
				                     checkboxGroup1.setItemDisable("checkbox2",false);  
			                      }
			    	 		   
			     });				 
				var button21= new ctp.ui.button({
			  	      id: 'button21',
					  width:180,
					  text:'checkbox2是否禁用',					 
					  onClick:function (){
				                    ctpMSB.alert({
										title: '信息提示',
										message: checkboxGroup1.isItemDisable("checkbox2")
									});  
			                      }
			    	 		   
			     });
				var button22=  new ctp.ui.button({
			  	      id: 'button22',
					  width:180,
					  text:'选择checkbox2',					 
					  onClick:function (){
				                     checkboxGroup1.setItemChecked("checkbox2",true);  
			                      }
			    	 		   
			     });
				var button23=  new ctp.ui.button({
			  	      id: 'button23',
					  width:180,
					  text:'不选择checkbox2',					 
					  onClick:function (){
				                     checkboxGroup1.setItemChecked("checkbox2",false);  
			                      }
			    	 		   
			     });
				var button24= new ctp.ui.button({
			  	      id: 'button24',
					  width:180,
					  text:'checkbox2是否选择',					 
					  onClick:function (){
				                    ctpMSB.alert({
										title: '信息提示',
										message: checkboxGroup1.isItemChecked("checkbox2")
									});  
			                      }
			    	 		   
			     });
				var button25= new ctp.ui.button({
			  	      id: 'button25',
					  width:180,
					  text:'触发组改变函数',					 
					  onClick:function (){
				                     checkboxGroup1.onChange(function(){ctpMSB.alert({
									 	title: '信息提示',
									 	message: "你改变了组选择!"
									 });});  
			                      }
			    	 		   
			     });
				var button26=  new ctp.ui.button({
			  	      id: 'button26',
					  width:180,
					  text:'设置值为111和222',					 
					  onClick:function (){
				                     checkboxGroup1.setValue("111,222");  
			                      }
			    	 		   
			     });
				var button27=  new ctp.ui.button({
			  	      id: 'button27',
					  width:180,
					  text:'删除所有项',					 
					  onClick:function (){
				                     checkboxGroup1.delAllItems();  
			                      }
			    	 		   
			     });
				 var button28=  new ctp.ui.button({
			  	      id: 'button28',
					  width:180,
					  text:'删除组件',					 
					  onClick:function (){
				                     checkboxGroup1.remove();  
			                      }
			    	 		   
			     });
				 var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '75%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: checkboxGroup1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
						[{element: button1},{element: button2},{element: button3}],
						[{element: button4},{element: button5},{element: button6}],
						[{element: button7},{element: button8},{element: button9}],
						[{element: button10},{element: button11},{element: button12}],
						[{element: button13},{element: button14},{element: button15}],
						[{element: button16},{element: button17},{element: button18}],
						[{element: button19},{element: button20},{element: button21}],	
						[{element: button22},{element: button23},{element: button24}],
						[{element: button25},{element: button26},{element: button27}],
						[{element: button28}]						 
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'ctp.ui.checkboxgroup实例',
                    collapsible: true,
                    width: '750px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });  
				var validator = new ctp.validator({id:'validator',target:checkboxGroup1});   
               }	
			  
			);
			
		
        </script>
    </head>
    <BODY>
    	<b>ctp.ui.checkboxgroup实例</b><hr/><br/>
 		
		<div id="checkboxGroupDiv"> 
           <div id="checkboxDiv"></div> 
           <div id="buttonDiv"></div>         		   
        </div> 

		
</BODY>
</html>